<template>
	<view class="page">
		 
		<view class="bg"> </view>

		<view class="adress" @click="tourl('/pages/my/myadress/myadress?type=add')">
			<view class="" v-if="adressinfo" >
				<view class="a1">{{adressinfo.name}} {{adressinfo.mobile}}</view>
				<view class="a2">{{adressinfo.detailAddress}} </view>
			</view>
			<view class="" v-if="!adressinfo">
				<view class="a1">请输入您的详细服务地址</view>
				<view class="a2">您当前还没有地址信息哦</view>
			</view>
			<u-icon slot="right" name="arrow-right"></u-icon>

		</view>
		 
		<view class="form"  >
			<u-form :model="serveInfo" ref="uForm" labelWidth="200rpx" :labelStyle="{fontWeight:600,fontSize:'32rpx'}">
				<u-form-item label="服务日期：" @click="showdate">
					<view class="inp">
						{{serviceTime}}
					</view>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="服务时间："v-if="serveInfo.type==1"  @click="showTimePopup">
				 	<view class="inp">
				 		{{ serveInfo.timeCycle || ""}}
				 	</view>
				 	<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
			</u-form>
		</view> 
		 
		 	  
		<view style="height: 100rpx;"> </view>
		
		<view class="orderfooter">
		   
		  <view class="woodsbtn" @click="handleSubmit">
			确认修改
		  </view>
		</view>
		<chose-time ref="choseTime" @handleTime="handleTime"></chose-time>
		<wuCalendar ref="calendar" @confirm="confirm" :range="mode"/>
	</view>
</template>

<script>
	import {mapMutations,mapState } from "vuex";
	import choseTime from "@/components/choseTime"
	import { timeToDecimal} from "@/utils/utils.js"
	import wuCalendar from "./components/wu-calendar.vue" 
	import {updateOrderAPI,orderdetailAPI } from "@/api/order.js"
	import { calculateDaysBetweenDates } from "@/utils/utils.js"
	export default {
		components: {
			 choseTime,wuCalendar
		},
		data() {
			return {
				show: false,
				mode: false,//multiple
				  
				serveInfo:{ //服务对象
					categoryName:"",
					serviceStartTime:"",
					serviceNum:"",
					  
				},
				money:0, 
				orderStaffDO:[],
				orderType:"",//1 保洁单 2 工程单 3 陪护单
				id:"",
				ids:[],
				serviceTime:"",
				workTime:"",
				totalDayNum:""
			}
		},
		computed:{
		    ...mapState("common", ["adressinfo"]),
			 
		},
		 
		onLoad(option) {
			if(option.id){
				
				this.id=option.id.split(",")[0]
				this.ids=option.id.split(",")
				this.getinit() 
			}
			 
		},
		methods: {
			...mapMutations("common",["SET_adressinfo"]),
			showTimePopup() {
				this.$refs.choseTime.show = true
			},
			handleTime(item){
				this.serveInfo.timeCycle=item.startTime+"-"+item.endTime 
				this.workTime= timeToDecimal(item.workTime)
			} ,
			chose(id){
				this.payChannelCode=id
			},
			confirm(e) {
				console.log(e)
				this.totalDayNum=calculateDaysBetweenDates(e[0],e[e.length-1]) 
				this.serveInfo.serviceStartTime= e[0]
				this.serveInfo.serviceEndTime=e[e.length-1]	
				if(this.serveInfo.serviceStartTime==this.serveInfo.serviceEndTime){
					this.serviceTime=this.serveInfo.serviceStartTime
				}else{
					this.serviceTime=this.serveInfo.serviceStartTime+"~"+this.serveInfo.serviceEndTime
				}
				
				
			},
			handleSubmit(){
				console.log(this.workTime)
				if(this.serveInfo.serviceSection!=this.workTime){
					return uni.showToast({
						title:'请选择时间为'+this.serveInfo.serviceSection+"小时的区间",
						icon:'none',
						duration:40000
					})
				}
				if(this.serveInfo.days!=this.totalDayNum && this.serveInfo.type=="3"){
					return uni.showToast({
						title:'请选择周期为'+this.serveInfo.days+"天的日期",
						icon:'none',
						duration:40000
					})
				}
				let data={
					...this.serveInfo,
					addressId:this.adressinfo.id,
					receiverName: this.adressinfo.name,
					receiverMobile:this.adressinfo.mobile,
					receiverDetailAddress: this.adressinfo.detailAddress,
					longitude: this.adressinfo.longitude,
					latitude: this.adressinfo.latitude,
					ids:this.ids
				} 
				delete data.id
				updateOrderAPI(data).then(res=>{
					uni.showToast({
						title:'修改成功',
						
					})
					setTimeout(()=>{
						 uni.navigateBack()
					},1000)
				})
			},
			 showdate(mode){
				 	this.$refs.calendar.endTimeFlag=false
					this.$refs.calendar.rangeVal= this.mode 
					this.$refs.calendar.visible= true
			 }, 
			getinit(){
				// 详情
				orderdetailAPI({id:this.id}).then(res=>{
					this.serveInfo=res
					this.serviceTime=res.serviceStartTime==res.serviceEndTime?res.serviceStartTime:res.serviceStartTime+"~"+res.serviceEndTime
					this.SET_adressinfo({
						name:res.receiverName,
						mobile:res.receiverMobile,
						detailAddress:res.receiverDetailAddress,
						id:res.addressId,
						longitude:res.longitude,
						latitude:res.latitude
					}) 
					this.workTime=this.serveInfo.serviceSection
					this.mode=this.serveInfo.type==3
				})
			},
			 
		}
	}
</script>

<style scoped lang="scss">
.page {
	padding: 0 20rpx 120rpx;
	background-color: #F8F8F8;
	min-height: 100vh;
}

.bg {
	width: 100%;
	height: 300rpx;
	background: #277EEF;
	border-radius: 0rpx 0rpx 140rpx 140rpx;
	position: absolute;
	top: 0;
	left: 0;
}
 
.topprice {

	width: 100%;
	font-weight: 500;
	font-size: 28rpx;
	color: #277EEF;
	line-height: 100rpx;
	text-align: center;
}

.adress {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background-color: #FFFFFF;
	border-radius: 10rpx;
	padding: 20rpx;
	margin-top: 30rpx;

	.a1 {
		font-weight: bold;
		font-size: 28rpx;
		color: #333333;
		line-height: 53rpx;
	}

	.a2 {
		font-size: 24rpx;
		color: #999999;
		line-height: 48rpx;
	}
}

.form {
	position: relative;
	margin-top: 20rpx;
	background-color: #FFFFFF;
	border-radius: 10rpx;
	padding: 20rpx;

	.inp {
		width: 100%;
		display: flex;
		 
		justify-content: flex-end;
	}
}
 
.box{
	padding:20rpx;
	border-radius: 15rpx;
	background-color: #fff;
	margin-bottom: 30rpx;
	 
	.a{
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin:18rpx 0;
		view{
			color: #333333;
			font-weight: 600;
			font-size: 28rpx;
			
		}
		text{
			color: #333333;
			font-weight: 600;
			font-size: 28rpx;
		}
	}
	.img{
		display: flex;
		align-items: center;
		
		image{
			
			width: 160rpx;
			height: 160rpx; 
			margin-right: 30rpx;
			
			border-radius: 10rpx;
		}
	}
	  
.pay-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  margin-top: 6rpx;
  .block-box__row {
	  display: flex;
	justify-content: flex-start;
	align-items: center;
	width: 606rpx;
	padding: 26rpx 0;
	margin-left: 28rpx;
	 
	image {
	  width: 48rpx;
	  height: 48rpx;
	}
	label {
	  margin-left: 12rpx;
	  font-size: 28rpx;
	  font-weight: bold;
	  color: #333333;
	}
  }
}
 
}
 

.orderfooter {
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 20rpx 30rpx;
    background-color: #fff;
	 
    
    .woodsbtn{
		width: 90%;
	}
     
  }	
</style>